<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .redbg{
            width: 100%;
            height: 35%;
            position: absolute;
        }
        .header{
            display:flex;
            justify-content: space-between;
            padding: 0 20px;
            align-items: center;
            position: relative;
            top: 10px; 
        }
        .header .logo img{
        width: 332px;
        height: 66px;
        }
        .logo img:hover{
        cursor: pointer;
        }
        .header .ion img{
        width: 21px;
        height:21px;
        }


           /* 图片轮播 */
           .lunbo{
        /* height: 420px; */
        position: relative;
        align-items: center;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 20px;
        }
        .lunbo img{
        max-width: 100%;
        height: 100%;
        object-fit: cover;
        }

        .lunbo .dots {
        position: absolute;
        left: 50%;
        bottom: 10px;
        transform: translateX(-50%);
        }
        .lunbo .dots .dot{
        /* 将span转换成行内块 */
        display: inline-block;
        width: 5px;
        padding: 5px;
        border-radius: 50%;
        border: 1px solid white;
        cursor: pointer;
        }
        .lunbo .dots .dot.selected{
        background-color: #fff;
        }



        /* 中间字体 */

        /* li标签去除标点 */
        .ziti li{
        list-style-type: none;
        /* 字体中间间距 */
        padding: 0 20px;
        }

        .ziti{
        display: flex;
        justify-content: center;
        cursor: pointer;
        list-style-type: none;
        /* 字体中间间距 */
        padding: 50px 20px;
        }


        .a{
        color: #4c4c4c;
        font-size: 34px;
        font-weight: bold;
        }
        .b{
        font-size: 24px;
        font-weight: bold;
        color: #333;
        
        }
        .c{
        font-size: 20px;
        color: #999999;
        font-family: 'Times New Roman', Times, serif;
        }
        /* 添加字体变红伪类 */
        .caiyuan,.tongzhi,.meiti,.caiyuan1:hover{
        cursor: pointer;
        }

        .a:hover{
        color: #c3122c;
        }

    </style>
</head>
<body>
    <!-- 头部标签 -->
     <!-- 红色背景图 -->
   <img class="redbg" src="redbg.jpg">
   <div class="header">
    <div class="logo">
    <img src="https://www.jxvc.jx.cn/images-x/logo26.png" alt="">
    </div>
    <div class="ion">
        <img src="https://www.jxvc.jx.cn/images-x/search_but.png" alt="">
        <img src="https://www.jxvc.jx.cn/images-x/navimg.png " >
    </div>
   </div>

   
    
    <!-- &lt;!-- 图片轮播 --&gt; -->
    <div class="lunbo">
        <img src="https://www.jxvc.jx.cn/images/23/zhutixuexijiaoyu.png" alt="">
        <div class="dots">
            <span class="dot"></span>
            <span class="dot selected"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
    </div>

<!-- &lt;!-- 字体 --&gt; -->
<ul class="ziti">
    <li class="caiyuan">
        <span class="a">财院</span>
        <span class="b">新闻/</span>
        <span class="c">News</span>
    </li>
    <li class="tongzhi">
        <span class="a">通知</span>
        <span class="b">公告/</span>
        <span class="c">Notice</span>
    </li>
    <li class="meiti">
        <span class="a">媒体</span>
        <span class="b">关注/</span>
        <span class="c">Media</span>
    </li>
    <li class="caiyuan1">
        <span class="a">财院</span>
        <span class="b">视频/</span>
        <span class="c">Video</span>
    </li>
 </ul>

 <div class="kuang">
    <ul>
        <li>
            <div class="di">
            <img src="" alt="">

            </div>
            <div class="e">
                <span></span>
            </div>
        </li>
        <li>  <img src="" alt="">
            <span></span>
        </li>
        <li>
            <img src="" alt="">
            <span></span>
        </li>
        <li>
            <img src="" alt="">
            <span></span>
        </li>
        <li>
            <img src="" alt="">
            <span></span>
        </li>
    </ul>
 </div>
</body>
</html>